<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../style/common.css" />
    <link rel="stylesheet" href="../style/index.css" />
  </head>
  <body>
    <div class="app">
      <div class="navigation disable-select">
        <nav></nav>
      </div>
      <div class="container">
        <div class="file-input">
          <label for="fileUpload">选择文件：</label>
          <input type="file" id="fileUpload" />
        </div>
        <div class="file-upload">
          <button id="uploadButton">上传文件</button>
          <div id="uploadStatus"></div>
        </div>
      </div>
    </div>
    <script>
      // 加载菜单栏
      const lists = [
        {
          name: "系统运行信息",
          href: "http://127.0.0.1:5501/index.html",
        },
        {
          name: "功能配置",
          href: "http://127.0.0.1:5501/views/fun-config.html",
        },
        {
          name: "WIFI配置",
          href: "http://127.0.0.1:5501/views/wifi-config.html",
        },
        {
          name: "WALLBOX控制",
          href: "http://127.0.0.1:5501/views/wall-box.html",
        },
        {
          name: "OTA",
          href: "http://127.0.0.1:5501/views/ota.html",
          active: true,
        },
      ];
      lists.forEach((item) => {
        const a = document.createElement("a");
        a.target = "_self";
        a.href = item.href;
        a.innerText = item.name;
        if (item.active) {
          a.classList.add("active");
        }
        document.querySelector("nav").appendChild(a);
      });
      // 加载菜单栏

      // OTA 文件上传
      document
        .getElementById("uploadButton")
        .addEventListener("click", function (e) {
          e.preventDefault();
          var fileInput = document.getElementById("fileUpload");
          var file = fileInput.files[0];
          var formData = new FormData();
          formData.append("file", file);

          fetch("/upload", {
            method: "POST",
            body: formData,
          })
            .then((response) => {
              if (!response.ok) {
                throw new Error("Network response was not ok");
              }
              // 改下返回值
              return response.text();
            })
            .then((data) => {
              document.getElementById("uploadStatus").textContent =
                "文件上传成功: " + data;
            })
            .catch((error) => {
              console.error("Error:", error);
              document.getElementById("uploadStatus").textContent =
                "文件上传失败: " + error.message;
            });
        });
    </script>
  </body>
</html>
